<template>
  <div @click="show_context_menu=false">
        <main-menu :list="main_menu" @item-click="main_menu_click"></main-menu>
        <el-container class="main-body">
            <el-main class="index">
                <el-container class="body">
                    <el-aside class="nav">
                        <el-collapse v-model="editing_show" >
                            <el-collapse-item  title="打开的笔记" name="editing" class="editing-item">
                                <div v-for="(v,i) in editing" :key="v.id" style="display:flex"  :class="{'item':true,'active':i==editing_index }" >
                                    <i class="el-icon-close" @click="editing_close(i)"></i>
                                    <el-link :class="{'editing-item-link':true }" style="flex:1" :underline="false" @click="editing_item_click(i)" :type="v.checked ? 'primary' : ''">{{ v.name }}</el-link>
                                </div>
                            </el-collapse-item>
                        </el-collapse>

                        <el-collapse >
                            <el-collapse-item title="列表"  @contextmenu.prevent.stop="file_right_click($event,null)" name="filelist">
                                <!-- show-checkbox -->
                                <div class="filelist-toolbar" >
                                    <div class="box" style="display:flex">
                                        <el-input style="flex:1"
                                        size="small"
                                            placeholder="请输入内容"
                                            v-model="search_input">
                                            <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                        </el-input>
                                        <el-button type="small" title="添加笔记分类" class="plus-btn" @click="toolbar_add" >
                                            <i class="el-icon-plus"></i>
                                        </el-button>
                                    </div>
                                    <!-- <div>
                                    </div> -->
                                </div>
                                
                                <!-- default-expand-all :expand-on-click-node="false" -->
                                <el-tree
                                    class="filelist"
                                    :data="filelist"
                                    node-key="id"
                                    
                                     >
                                    <span class="custom-tree-node" slot-scope="{ node, data }" @contextmenu.prevent.stop="file_right_click($event,data,node)"   @click="file_click(data)">
                                        <span>
                                            <i :class="{'el-icon-folder':data.type=='notebook','el-icon-document':data.type!='notebook'}"></i>
                                            {{ node.label }}
                                        </span>
                                        <!-- <span class="tree-btn-group"> -->
                                            <!-- <el-button v-if="data.children && data.children.length > 0"
                                                type="text"
                                                size="mini"
                                                @click="() => append(data)">
                                                <i class="el-icon-edit" title="重命名"></i>
                                            </el-button>
                                            <el-button v-if="data.children && data.children.length > 0"
                                                type="text"
                                                size="mini"
                                                @click="() => append(data)">
                                                <i class="el-icon-plus" title="添加doc"></i>
                                            </el-button>
                                            <el-button v-if="data.children && data.children.length > 0"
                                                type="text"
                                                size="mini"
                                                @click="() => remove(node, data)">
                                                <i class="el-icon-delete" title="删除这个分类"></i>
                                            </el-button> -->
                                        <!-- </span> -->
                                    </span>
                                    </el-tree>
                            </el-collapse-item>
                        </el-collapse>

                        <!-- <el-link :underline="false">无下划线</el-link> -->

                    </el-aside>
                    <el-main class="edit">
                        <div class="editor-toolbar" ref="editor_toolbar"></div>
                        <div class="editor" ref="editor"></div>
                    </el-main>
                </el-container>
            </el-main>
        </el-container>

    <div class="status-bar">
        <div class="item" v-for="(text,i) in status_log" :key="i">
            <el-tag v-if="text.type=='success'" type="success">{{ text.text }}</el-tag>
            <el-tag v-else-if="text.type=='info'" type="info">{{ text.text }}</el-tag>
            <el-tag v-else-if="text.type=='warning'" type="warning">{{ text.text }}</el-tag>
            <el-tag v-else-if="text.type=='danger'" type="danger">{{ text.text }}</el-tag>
            <el-tag v-else>{{ text.text }}</el-tag>
        </div>
    </div>
    

    <!-- <button @click="tell_main">执行MAIN PROCESS</button> -->

    <div class="context-menu" v-show="show_context_menu" :style="{'left':context_x+'px','top':context_y+'px'}">
        <div class="item" v-for="(item,index) in context_menu[context_menu_select]" :key="index" @click.stop="context_menu_item_click(item)"> {{ item.name }} </div>
    </div>

        
    <el-dialog :title="input_dialog.title" :visible.sync="input_dialog.show">
        <el-form>
            <el-form-item label="" v-if="input_dialog.path">
                位置：{{ input_dialog.path }}
            </el-form-item>
            <el-form-item label="">
                <el-input v-model="input_dialog.input_name"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="idialog_cancel_input()">取 消</el-button>
            <el-button type="primary" @click="idialog_ok_input()">确 定</el-button>
        </div>
    </el-dialog>
    </div>


</template>

<script>

import DecoupledEditor from  '@ckeditor/ckeditor5-build-decoupled-document'
import MainMenu from './common/MainMenu.vue'
//editor.then((v1,v2)=>{ console.log(v1.getData()) })
//editor.then((v1,v2)=>{ console.log(v1.setData()) })

window.console = {
    log:function(...data){
        this._show('info',...data)
    },
    warn:function(...data){
        this._show('warning',...data)
    },
    error:function(...data){
        this._show('danger',...data)
    },
    info:function(...data){
        this._show('info',...data)
    },
    _show:function(arg,...data){
        for(var i=0;i<data.length;i++)
        {
            if(typeof data[i]!="object"){
                that.status_log.splice(0,0,{
                    text:data[i],
                    type:arg
                })
            }else{
                that.status_log.splice(0,0,{
                    text:JSON.stringify(data[i],null,4),
                    type:arg
                })
            }
        }
    }
}

export default {
  components: { MainMenu },
    name: 'Index',
    data () {
        return {
            is_open:false,
            main_menu:[
                {
                    name:"打开文件",
                    pyname:"openfile"
                },{
                    name:"关闭文件",
                    pyname:"closefile"
                }
            ],
            search_input:"",//搜索框
            status_log:[
            ],//操作记录
            input_dialog:{  //弹窗
                type:0,     //0添加笔记分类，1在选中分类下添加分类，2笔记重命名，3在选中分类下添加笔记，4分类重命名
                title:"",   //标题
                show:false, //是否显示
                input_name:"",//输入的内容
                path:"",//上一级
            },
            show_context_menu:false,
            context_x:0,
            context_y:0,
            context_menu_select:0,  //0分类，1内容
            context_menu:[
                [
                    //分类
                    {
                        name:"重命名",
                        type:"rename"
                    },{
                        name:"删除",
                        type:"rem"
                    },
                    {
                        name:"添加子分类",
                        type:"add"
                    },{
                        name:"添加笔记",
                        type:"add_note"
                    }
                ],
                [   //内容
                    {
                        name:"重命名",
                        type:"rename"
                    },{
                        name:"删除",
                        type:"rem"
                    }
                ]
            ],
            msg: 'Welcome to Your Vue.js App',
            editing:[
                // {
                //     id:"cc",
                //     name:"1.txt",
                //     change_not_save:false,
                //     text:"",
                //     checked:false,//是否编辑中
                // },{
                //     id:"qq",
                //     name:"2.txt",
                //     checked:false,//是否编辑中
                // }
            ],
            editing_show:[],
            editing_index:-1,
            filelist:[
                // {
                //     "id": "1",
                //     "parent_id": "0",  
                //     "label": "全部",   
                //     "type": "notebook",
                //     "children": [      
                //         {
                //             "id": "test",
                //             "notebook_id": "1",
                //             "label": "小白",
                //             "text": "",
                //             "type": "note"
                //         },{
                //             "id": "test1",
                //             "notebook_id": "1",
                //             "label": "小白3",
                //             "text": "",
                //             "type": "note"
                //         }
                //     ]
                // }
            ]
        }
    },
    watch:{
        search_input:function(newval,oldval){
            if(window.last_input_timeout){
                clearTimeout(window.last_input_timeout)
            }
            window.last_input_timeout = setTimeout(() => {
                //输入完后触发
                if(window.Caller){
                    Caller.search_db(newval,(status,data)=>{
                        this.filelist=data
                    },3000)
                }
            }, 500);
        }
    },
    methods:{
        main_menu_click:function(obj){
            if(obj.pyname=="openfile"){
                var _this = this
                if(this.is_open){
                    this.$confirm("你确定要打开新的文件吗?",'提示',{
                         confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(()=>{
                        console.warn("打开了新文件!")
                        Caller.open_file(function(status,paths){
                            if(paths && paths.length>0){
                                Caller.select_db(paths[0],(res,data)=>{
                                    console.log(data)
                                    if(data && data.length){
                                        _this.is_open=true
                                        window.document.head.querySelector("title").innerText="笔记本："+paths[0]
                                        localStorage.setItem("last_open",paths[0])
                                        _this.filelist=data
                                        _this.status_log=[]
                                    }else{
                                        _this.$message.error("打开文件失败")
                                    }
                                },3000)
                            }else{

                            }
                        })
                    }).catch(()=>{

                    })
                    return
                }
                //打开DB文件
                Caller.open_file(function(status,paths){
                    console.log(paths)
                    if(paths && paths.length>0){
                        Caller.select_db(paths[0],(res,data)=>{
                            console.log(res,data)
                            if(data.length){
                                _this.is_open=true
                                window.document.head.querySelector("title").innerText="笔记本："+paths[0]
                                localStorage.setItem("last_open",paths[0])
                                _this.filelist=data
                                _this.status_log=[]
                            }else{
                                _this.$message.error("打开文件失败")
                            }
                        },3000)
                    }else{

                    }
                })

            }
            if(obj.pyname=="closefile"){
                //关闭DB文件
                this.is_open=false
                this.editing=[]
                this.filelist=[]
                window.editor.then((edt)=>{ edt.setData("") })
                window.document.head.querySelector("title").innerText="笔记本"
            }
        },
        //关闭已打开笔记并且切换到另外一个里面，若没有打开的就置空
        editing_close:function(index){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            if(this.editing[index]){
                if(this.editing[index].change_not_save){
                    this.$confirm('你尚未保存 “'+this.editing[index].name+'” 是否继续关闭?', '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(() => {
                        console.error("关闭了 "+this.editing[index].name+" 笔记未保存!")
                        this.editing.splice(index,1)
                        if(this.editing[index]){
                            this.set_editor_text(this.editing[index].text)
                        }else{
                            this.set_editor_text('')
                        }
                    }).catch(() => {
                        
                    });
                }else{
                    console.info("关闭了 "+this.editing[index].name+" 笔记!")
                    this.editing.splice(index,1)
                    if(this.editing[index]){
                        this.set_editor_text(this.editing[index].text)
                    }else{
                        this.set_editor_text('')
                    }
                }
            }else{
                this.$message("你怎么进来这里的？")
            }
        },
        //读取内容进编辑器
        set_editor_text:function(txt){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            window.editor.then((edt)=>{ edt.setData(txt) })
        },
        //从DB中打开某个笔记
        open_note:function(note_obj){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            var index = this.editing.findIndex((v)=>{ return v.id==note_obj.id })
            if(index!=-1){
                this.editing_item_click(index)
            }else{
                console.info("打开了 "+note_obj.label+" 笔记!")

                var _this = this
                if(window.Caller){
                    Caller.get_note(note_obj.id,(status,data)=>{
                        if(data){
                            //请求note 信息
                            _this.editing.push({
                                id:data.id,
                                name:note_obj.label,
                                change_not_save:false,
                                text:data.text, //读取
                            })
                            _this.editing_index=_this.editing.length-1
                            _this.set_editor_text(_this.editing[_this.editing_index].text)
                        }
                    },3000)
                }
            }
            var find = this.editing_show.findIndex((v)=>{  return v=='editing' })
            if(find==-1){
                this.editing_show.push('editing')
            }
        },
        //已打开的doc列表项点击
        editing_item_click:function(index){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            this.editing_index=index
            var txt = this.editing[index].text
            this.set_editor_text(txt)
        },
        //文件左键点击，或文件夹
        file_click:function(note_or_notebook){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            this.show_context_menu=false
            if(note_or_notebook.type=="note"){
                this.open_note(note_or_notebook)
            }
        },
        //文件右键点击
        file_right_click:function(ev,data,node){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            window.last_right_click_node = node
            window.last_right_click_obj = data
            if(data.type=="notebook"){
                this.context_menu_show(0,ev.x,ev.y)
            }
            if(data.type=="note"){
                this.context_menu_show(1,ev.x,ev.y)
            }
        },
        //菜单显示函数
        context_menu_show:function(menu_index,x,y){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            this.context_menu_select=menu_index
            this.show_context_menu=true
            this.context_x=x
            this.context_y=y
        },
        //菜单点击
        context_menu_item_click:function(menu_info){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            if(this.context_menu_select==0){
                //分类菜单
                if(menu_info.type=="add"){
                    this.input_dialog.type=1
                    this.input_dialog.path=last_right_click_obj.label
                    this.input_dialog.title="添加笔记分类"
                    this.input_dialog.input_name=""
                    this.input_dialog.show=true
                }
                if(menu_info.type=="rem"){
                    if(last_right_click_obj.children && last_right_click_obj.children.length>0){
                        this.$message.error('删除该分类下所有内容后才可删除该分类')
                    }else{
                        this.$confirm('此操作将永久删除 "'+last_right_click_obj.label+'" 笔记分类, 是否继续?', '提示', {
                            confirmButtonText: '是',
                            cancelButtonText: '否',
                            type: 'warning'
                        }).then(() => {
                            console.error("删除了 "+last_right_click_obj.label+" 笔记分类!")

                            if(window.Caller){
                                Caller.rem_notebook(last_right_click_obj.id,(status)=>{
                                    if(status=="success"){

                                        const parent = last_right_click_node.parent;
                                        const children = parent.data.children || parent.data;
                                        const index = children.findIndex(d => d.id === last_right_click_obj.id);
                                        children.splice(index,1)

                                        this.$message({
                                            type: 'success',
                                            message: '删除成功!'
                                        });
                                    }else{
                                        this.$message.error("删除失败")
                                    }
                                },3000)
                            }
                        }).catch(() => {
                            
                        });
                    }
                }
                if(menu_info.type=="add_note"){
                    //添加新笔记
                    this.input_dialog.type=3
                    this.input_dialog.path=last_right_click_obj.label
                    this.input_dialog.title="添加笔记"
                    this.input_dialog.input_name=""
                    this.input_dialog.show=true
                }
                if(menu_info.type=="rename"){
                    this.input_dialog.type=4
                    this.input_dialog.path=last_right_click_obj.label
                    this.input_dialog.title="重命名分类"
                    this.input_dialog.input_name=window.last_right_click_obj.label
                    this.input_dialog.show=true
                }
            }
            if(this.context_menu_select==1){
                //笔记菜单
                if(menu_info.type=="rename"){
                    this.input_dialog.type=2
                    this.input_dialog.path=last_right_click_obj.label
                    this.input_dialog.title="重命名笔记"
                    this.input_dialog.input_name=window.last_right_click_obj.label
                    this.input_dialog.show=true
                }
                if(menu_info.type=="rem"){
                    this.$confirm('此操作将永久删除 "'+last_right_click_obj.label+'" 笔记, 是否继续?', '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(() => {
                        console.error("删除了 "+last_right_click_obj.label+" 笔记!")

                        // const parent = last_right_click_node.parent;
                        // const children = parent.data.children || parent.data;
                        // const index = children.findIndex(d => d.id === last_right_click_obj.id);
                        // children.splice(index,1)

                        if(window.Caller){
                            Caller.rem_note(last_right_click_obj.id,(status)=>{
                                if(status=="success"){

                                    var lastid = last_right_click_obj.id
                                    var index1 = this.editing.findIndex((v)=>{ return v.id==lastid })
                                    if(index1!=-1){
                                        this.editing.splice(index1,1)
                                    }
                                    
                                    const parent = last_right_click_node.parent;
                                    const children = parent.data.children || parent.data;
                                    const index = children.findIndex(d => d.id === last_right_click_obj.id);
                                    children.splice(index,1)

                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                }else{
                                    this.$message.error("删除失败")
                                }
                            },3000)
                        }

                    }).catch(() => {
                        
                    });
                }
            }
            this.show_context_menu=false
        },
        toolbar_add:function(){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            this.input_dialog.type=0
            this.input_dialog.path=""
            this.input_dialog.title="添加笔记分类"
            this.input_dialog.input_name=""
            this.input_dialog.show=true
        },
        idialog_cancel_input:function(){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            this.input_dialog.show=false
        },
        idialog_ok_input:function(){
            if(!this.is_open){
                this.$message.error('请打开文件后操作')
                return
            }
            //0添加笔记分类，1在选中分类下添加分类，2笔记重命名，3在选中分类下添加笔记，4分类重命名
            //在tree中被右击选择的某个对象window.last_right_click_obj

            var _this = this
            if(this.input_dialog.type==0){
                console.info("添加了 "+this.input_dialog.input_name+" 笔记分类!")

                var addobj = {
                    "id": Date.now()+"",
                    "parent_id": "0",
                    "label": this.input_dialog.input_name,
                    "type": "notebook"
                }
                if(window.Caller){
                    Caller.set_notebook(addobj.id,addobj.label,addobj.parent_id,(status)=>{
                        if(status=="success"){
                            //root下添加
                            _this.filelist.push(addobj)
                        }else{
                            _this.$message.error("添加失败")
                        }
                    },3000)
                }
            }
            if(this.input_dialog.type==1){
                console.info("添加了 "+window.last_right_click_obj.label+"/"+this.input_dialog.input_name+" 笔记分类!")

                var addobj = {
                    "id": Date.now()+"",
                    "parent_id": window.last_right_click_obj.id,
                    "label": this.input_dialog.input_name,
                    "type": "notebook"
                }
                if(window.Caller){
                    Caller.set_notebook(addobj.id,addobj.label,addobj.parent_id,(status)=>{
                        if(status=="success"){
                            //root下添加
                            //在某个下添加分类
                            if(!window.last_right_click_obj.children){
                                _this.$set(window.last_right_click_obj,'children',[])
                            }
                            window.last_right_click_obj.children.push(addobj)
                            
                        }else{
                            _this.$message.error("添加失败")
                        }
                    },3000)
                }

            }
            if(this.input_dialog.type==3){
                console.info("添加了 "+window.last_right_click_obj.label+"/"+this.input_dialog.input_name+" 笔记!")

                var addobj = {
                    "id": Date.now()+"",
                    "notebook_id": window.last_right_click_obj.id,
                    "label": this.input_dialog.input_name,
                    "text": "",
                    "type": "note"
                }
                if(window.Caller){
                    Caller.set_note(addobj.id,addobj.notebook_id,addobj.label,(status)=>{
                        if(status=="success"){
                            //在某个下添加笔记
                            if(!window.last_right_click_obj.children){
                                _this.$set(window.last_right_click_obj,'children',[])
                            }
                            window.last_right_click_obj.children.push(addobj)
                            
                        }else{
                            _this.$message.error("添加失败")
                        }
                    },3000)
                }

            }
            if(this.input_dialog.type==2){
                console.info("重命名 "+this.input_dialog.input_name+" 笔记!")

                //重命名笔记
                
                if(window.Caller){
                    Caller.set_note(window.last_right_click_obj.id,window.last_right_click_obj.notebook_id,this.input_dialog.input_name,(status)=>{
                        if(status=="success"){
                            window.last_right_click_obj.label=_this.input_dialog.input_name
                        }else{
                            _this.$message.error("修改失败")
                        }
                    },3000)
                }
            }
            if(this.input_dialog.type==4){
                console.info("重命名 "+this.input_dialog.input_name+" 笔记分类!")

                if(window.Caller){
                    Caller.set_notebook(window.last_right_click_obj.id,_this.input_dialog.input_name,window.last_right_click_obj.parent_id,(status)=>{
                        if(status=="success"){
                            window.last_right_click_obj.label=_this.input_dialog.input_name
                        }else{
                            _this.$message.error("修改失败")
                        }
                    },3000)
                }

                //重命名分类
                window.last_right_click_obj.label=this.input_dialog.input_name
            }

            this.input_dialog.show=false
        }
        // tell_main:function(){
        //     if(window.ipcRenderer){
        //         window.ipcRenderer.invoke('test','tell me please')
        //     }
        // }
    },
    mounted(){
        window.that = this
        
        window.editor = DecoupledEditor.create(this.$refs['editor'],{
            // plugins: [ Autosave ],
            // autosave: {
            //     save( editor ) {
            //         console.log('test')
            //         // The saveData() function must return a promise
            //         // which should be resolved when the data is successfully saved.
            //         // if(window.that && window.that.editing[window.that.editing_index]){
            //         //     window.that.editing[window.that.editing_index].text = editor.getData()
            //         //     return true
            //         // }else{
            //         //     window.that.$message("请选择对应的笔记进行编辑")
            //         // }
            //     }
            // }
        })

        window.editor.then(editor=>{
            var lasttime = Date.now()
            editor.model.document.on( 'change:data', () => {
                if(Date.now()<lasttime && window.that && window.that.editing[window.that.editing_index]){
                    if(window.that.editing[window.that.editing_index].text!=editor.getData()){
                        window.that.editing[window.that.editing_index].change_not_save=true
                    }
                    window.that.editing[window.that.editing_index].text = editor.getData()

                }else{
                }
            })
            editor.editing.view.document.on("keydown",function(){  lasttime = Date.now()+1000 })
            editor.editing.view.document.on("keyup",function(ed,ev){
                if (ev.keyCode == 83 && ev.ctrlKey) {
                    //CTRL+S 保存内容
                    var obj = window.that.editing[window.that.editing_index]
                    if(obj && window.Caller){
                        Caller.set_note_text(obj.id,obj.text,(status,data)=>{
                            if(status=="success"){
                                window.that.editing[window.that.editing_index].change_not_save=false
                                window.that.$message({message:"保存成功",type:"success"})
                            }else{
                                window.that.$message.error("保存失败")
                                window.that.editing[window.that.editing_index].change_not_save=true
                            }
                        },3000)
                    }
                    ev.preventDefault();
                    ev.stopPropagation()
                }
            })
            // editor.view.document.on('keyup',(event,evdata)=>{
            //     alert(1)
            // })

            editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
                return new UploadAdapter(loader);
            };
            this.$refs['editor_toolbar'].appendChild(editor.ui.view.toolbar.element)
        })

        class UploadAdapter {
            constructor(loader) {
                this.loader = loader;
            }
            upload() {
                return new Promise((resolve, reject) => {
                const data = new FormData();
                data.append('upload', this.loader.file);
                data.append('allowSize', 10);//允许图片上传的大小/兆
                this.loader.file.then((f)=>{
                    var reader = new FileReader(f); //实例化文件读取对象
                    reader.readAsDataURL(f); //将文件读取为 DataURL,也就是base64编码
                    reader.onload = function(ev) { //文件读取成功完成时触发
                        // var dataURL = ev.target.result;
                        resolve({
                            default: ev.target.result
                        });
                    }
                })
               

                // $.ajax({
                //     url: '/QingXiao/Article/uploadArticleImage4',
                //     type: 'POST',
                //     data: data,
                //     dataType: 'json',
                //     processData: false,
                //     contentType: false,
                //     success: function (data) {
                //         if (data.res) {
                //             resolve({
                //                 default: data.url
                //             });
                //         } else {
                //             reject(data.msg);
                //         }

                //     }
                // });

            });
            }
            abort() {
            }
        }
        
        setTimeout(() => {
            // var filepath="D:\\hqk\\projects\\study-electron\\nodepad\\a.db"
            var filepath = localStorage.getItem("last_open")
            
            if(!filepath){

            }else{
                if(window.Caller){
                    Caller.exists_file(filepath,(status,exists)=>{
                        if(exists==true){
                            Caller.select_db(filepath,(res,data)=>{
                                if(data.length){
                                    this.is_open=true
                                    window.document.head.querySelector("title").innerText="笔记本："+filepath
                                    this.filelist=data
                                    this.status_log=[]
                                }
                                
                            },3000)
                        }else{
                            localStorage.removeItem("last_open")
                        }
                    })
                }
            }
        }, 2000);

    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .main-body{
        padding-top: 27px;
    }
    .status-bar{
        text-align: left;
        padding-left: 10px;
        overflow-y: auto;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 63px;
        border-top: 1px solid #ddd;
        z-index: 3;
        background-color: white;
    }
    .status-bar *{
        margin-top: 1px;
    }
    .status-bar:hover{
        height: 127px;
    }
     
    .status-bar::-webkit-scrollbar-thumb{
        width: 10px;
        height: 8px;
        background-color: #ddd;
    }
    .status-bar::-webkit-scrollbar{
        width:10px;
        overflow-x: visible;
        background-color: transparent;
    }

    .filelist-toolbar{
        text-align: right;
        margin:5px 0 5px 0;
    }
    .filelist-toolbar .plus-btn{
        padding:9px 5px;
        margin-left:5px;
        width:32px;
        text-align:center;
    }
    .filelist * {
        user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -moz-user-select: none;
    }
    .filelist{
        padding-bottom:200px;
    }
    
    .context-menu .item{
        cursor: pointer;
        padding-left: 20px;
        padding-right: 40px;
        font-size: 14px;
        line-height: 22px;
        min-width: 80px;
        text-align: left;
    }
    .context-menu .item:hover{
        background-color: rgb(223, 223, 223);
    }
    .context-menu{
        z-index: 100000;
        position: fixed;
        padding: 5px 1px;
        background-color: white;
        box-shadow: 0px 2px 5px #ddd;
    }

    .custom-tree-node{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 8px;
    }
    .tree-btn-group{
        float: right;
    }
    .editing-item{
        text-align: left;
    }
    .editing-item-link{
        padding: 0 8px;
        display: block;
        text-overflow:ellipsis;
        overflow: hidden;
    }
    .editing-item .el-icon-close{
        width: 24px;
        line-height: 24px;
        text-align: center;
        cursor: pointer;
    }
    .editing-item .el-icon-close:hover{
        background-color: rgba(0,0,0,0.1);
    }
    
    .editing-item .item:hover{
        background-color: #F5F7FA;
    }
    .editing-item .item.active{
        background-color: #F5F7FA;
    }
    /* .editing-item-link.active{

    }
    .editing-item-link:hover{
        
    } */

    .index{
        height: calc(100vh - 76px - 27px);
        padding: 0 !important;
    }
    
    .nav::-webkit-scrollbar-thumb{
        width: 10px;
        height: 8px;
        background-color: #ddd;
    }
    .nav::-webkit-scrollbar{
        width:10px;
        overflow-x: visible;
        background-color: transparent;
    }
    .nav{
        height: 100%;
        overflow-y: auto;
    }
    .body{
        height: 100%;
    }
    
    .edit{
        position: relative;
        overflow: auto;
        overflow-y: scroll;
    }
    .edit::-webkit-scrollbar-thumb{
        width: 10px;
        height: 8px;
        background-color: #ddd;
    }
    .edit::-webkit-scrollbar{
        width:10px;
        overflow-x: visible;
        background-color: transparent;
    }
    .file-item-path{
        overflow:hidden;
        flex: 1;
        text-overflow: ellipsis;
        text-align: left;
        padding-left: 16px;
    }
    .edit .editor-toolbar{
        position: fixed;
        width: calc(100vw - 366px);
        top: calc(8px + 27px);
        z-index: 10;
    }
    .edit .editor{
        border:1px solid #eee;
        padding-top: 25px;
    }
</style>
